<!-- <template>
  <div>Mouse position is at: {{ x }}, {{ y }}</div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const x = ref(0)
const y = ref(0)

function update(event) {
  x.value = event.pageX
  y.value = event.pageY
}

onMounted(() => window.addEventListener('mousemove', update))
onUnmounted(() => window.removeEventListener('mousemove', update))
</script> -->

<template>
  <div class="app">
    <div>Mouse position is at: {{ x }}, {{ y }}</div>
    <img
      class="img"
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F3c7da628a2cb7a01773e96d9636e1b9f5bd783442f3e8-nvrKZp_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669444762&t=39e3ad23abbfccfb481a4f15765e7c83"
      alt=""
    />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import useMouse from '../../hooks/mouse'
const { x, y } = useMouse()

// const newX = computed(() => {
//   return x.value + 'px'
// })

// const newY = computed(() => {
//   return y.value + 'px'
// })

const mouse = computed(() => {
  return {
    x: x.value + 'px',
    y: y.value + 'px'
  }
})
</script>

<style lang="scss" scoped>
.img {
  position: absolute;
  left: v-bind('mouse.x');
  top: v-bind('mouse.y');
}
</style>
